iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
自我挑戰組

Flutter系列 第 2

Flutter基礎介紹與實作-Day2 Flutter的安裝流程和環境配置

  • 分享至 

  • xImage
  •  

今天來介紹一下Flutter的環境安裝流程
下載Flutter(Windows)
1.到這個網站請點我下載最新版的Flutter sdk
2.下載完後解壓縮到C槽
安裝Flutter

  1. 到C槽進到flutter資料夾,並執行flutter_console.bat
    https://ithelp.ithome.com.tw/upload/images/20210916/201410326bnT05cbeL.jpg

  2. 點選flutter_console.bat之後會跑出一個長的很像cmd的視窗
    https://ithelp.ithome.com.tw/upload/images/20210916/20141032IjpFKi14Sp.jpg

然後在下面輸入flutter doctor,系統就會自動幫你檢查環境驗數和安裝Dark的SDK,下載完後會自動產生一份資料,上面會有一些錯誤的內容,但是不要緊張後面都會慢慢處理(以上此步驟也可以透過cmd完成)
https://ithelp.ithome.com.tw/upload/images/20210916/20141032pEoXWjUTXF.jpg

  1. 設定環境變數,在使用用者變數這個區域內,找的path的變數並在裡面新增一個C:\flutter\bin的路徑
    https://ithelp.ithome.com.tw/upload/images/20210916/20141032TbRnWEnWpB.jpg
  2. 然後要先安裝Android Studio這個編輯工具,這裡附上安裝網址請點我
    https://ithelp.ithome.com.tw/upload/images/20210916/20141032jgO3c4DUtF.jpg
    下載完後可以先檢查一下系統有沒有幫我們把一些該打勾的東西都打勾,點一下右下角的Configure下面的Settings裡面的SDK Tools有一個Android SDK Command-line Tools(latest)要記得打勾,好了之後按下ok就可以關掉了喔
    https://ithelp.ithome.com.tw/upload/images/20210916/201410329LtFqDSSHD.jpg
  3. 檢查完後就可以試試看你的模擬器是不是正常的,一樣點擊右下角的Configure下面的AVD Manger然後點左下角的Create
    https://ithelp.ithome.com.tw/upload/images/20210916/20141032BfIqP9gje6.jpg
    之後就會出現很多的機種,點選一個自己喜歡的按下Next
    https://ithelp.ithome.com.tw/upload/images/20210916/20141032YP56H3151r.jpg
    選一個API Level大於27的按下Download,這個過程會比較久大家要有耐心啊
    https://ithelp.ithome.com.tw/upload/images/20210916/20141032zOWa4wuNl4.jpg
    整個結束之後就回到一開始的頁面
    https://ithelp.ithome.com.tw/upload/images/20210916/20141032j4bXybawa3.jpg
    點一下最右邊的長得像播放鍵的綠色箭頭,模擬機就會跑出來了喔!(整個過程一樣要花一點時間大家要有耐心喔!!!)
    https://ithelp.ithome.com.tw/upload/images/20210916/20141032IWAbGAJH7Z.jpg
  4. 再來就是在Android Studio內安裝Flutter和Dart plugin,點擊右下角的Configure下面的Plugin,搜尋flutter並安裝
    https://ithelp.ithome.com.tw/upload/images/20210916/20141032aqJDs9BaTc.jpg
    也可以順便安裝flutter snippets,這樣在日後程式編輯上比較方便,這其實是一個外掛程式,可以讓你只需要輸入縮寫就可以直接套用你樣要的模組
    https://ithelp.ithome.com.tw/upload/images/20210916/20141032rK7HXKtoWH.jpg
  5. 全部都安裝完後就可以透過cmd再檢查一次就會發現全部都是打勾了喔!
    https://ithelp.ithome.com.tw/upload/images/20210916/20141032XdTAWpBa0I.jpg
    今日總結
    俗話說:「工欲善其事,必先利其器」,今天我們把所需要的工具都安裝好了也算是成功了一小部份了,明天會介紹一下Flutter框架以及Flutter和react native的比較。

上一篇
Flutter基礎介紹與實作-Day1 Flutter基本概念介紹
下一篇
Flutter基礎介紹與實作-Day3 Flutter和React Native的比較
系列文
Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言